﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<title>漂亮的easyui后台框架演示-css后台模板222-</title>
	<link href="<%=basePath%>css/default.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath%>css/default/easyui.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath%>css/icon.css" rel="stylesheet" type="text/css" />

	<%--  <link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/default/easyui.css" />
      <link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/icon.css" />--%>

	<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/jquery.easyui.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/locale/easyui-lang-zh_CN.js"></script>

	<%--<script type="text/javascript" src='<%=basePath%>js1/jquery.easyui.min.js'> </script>
     <script type="text/javascript" src='<%=basePath%>js1/jquery.min.js'> </script>--%>

	<script type="text/javascript">
        function loadData() {
            $('#dg').datagrid({
                title: '录音列表',
                width: 900,
                method:"get",
                height: 300,
                url:"/loadVoice",
                fitColumns: true,
                singleSelect: true, //设置为true将只允许选择一行
                loadMsg: '正在拼命加载,请稍后...',
                rownumbers: false,  //显示行数
                pagination: true, //底部分页工具栏
                nowrap: true,  //截取超出部分的数据
                checkOnSelect: true,//点击一行的时候 checkbox checked(选择)/unchecked(取消选择)
                pageNumber: 1,//初始化分页码
                pageSize: 5, //初始化每页记录数
                pageList: [5, 10, 15],  //初始化每页记录数列表
                showFooter: false, //定义是否显示行底
                queryParams: form2Json("searchform"),　　//关键之处
                columns:[[
                    {field:'wordType',title:'词语类别', height:60,width:120,align:'center'},
                    {field:'classTypeName',title:'单词分类名字',  height:60,width:120,align:'center'},
                    {field:'chineseName',title:'词语',  height:60,width:120,align:'center'},
                    {field:'xieying',title:'谐音',  height:60,width:120,align:'center'},
                   /* ,{field:'vodioUrl',title:'链接',width:170,align:'center'}*/
                    {
                        field:'vodioUrl' ,
                        title:'链接' ,
                        width:250 ,
                        height:60,
                        align:'center',
                        formatter:function(value){
                            return '<audio style="height: 30px;width: 150px"  src='+value+' controls />';
                        }
                    }

                ]]
            });
        }



        //将表单数据转为json
        function form2Json(id) {

            var arr = $("#" + id).serializeArray()
            var jsonStr = "";

            jsonStr += '{';
            for (var i = 0; i < arr.length; i++) {
                jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
            }
            jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
            jsonStr += '}'

            var json = JSON.parse(jsonStr)
            return json
        }

        function newUser(){
            $(".window").css("display","block");
            $(".window-shadow").css("display","block");
        }

        $(function() {
            loadData();
            $("#submit_search").click(function () {
                $('#dg').datagrid({ queryParams: form2Json("searchform") });   //点击搜索
            });

            $(".window").css("display","none");
            $(".window-shadow").css("display","none");


        });
	</script>
</head>
<body >

<form name="searchform" method="post" action="" id ="searchform">
	<td width="70" height="30"><strong>输入词语:</strong></td>
	<td height="30">
		<input type="text" name="keyword" size=20 >
		<select name="word_type" id="word_type" >
			<option value="">请选择词语类型</option>
			<option value="动词" >动词</option>
			<option value="名词" >名词</option>
			<option value="助词" >助词</option>
		</select>
		<a id="submit_search">搜索</a>
	</td>
</form>
<div id="toolbar">
	<a class="easyui-linkbutton" iconCls="icon-add"   onclick="newUser()">新增录音</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit"  onclick="editUser()">编辑录音</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove"  onclick="destroyUser()">删除录音</a>
</div>
<table id="dg"   style="width:700px;height:250px"
	   url="/loadVoice"
	   toolbar="#toolbar" pagination="true"
	   rownumbers="true" fitColumns="true" singleSelect="true">
</table>

<div id="dlg" class="easyui-dialog" style="width:600px;height:300px"
	 data-options="title:'My Dialog',modal:true,
			buttons:[{
				text:'Save',
				handler:function(){...}
			},{
				text:'Close',
				handler:function(){...}
			}]">
	Dialog Content.
</div>


</body>
</html>